<script setup>
import {ref} from "vue";

const open = ref(false)


</script>

<template>
  <div class="min-h-screen w-screen 1bg-amber-50 flex flex-row gap-6">
    <!--  视频区域  -->
    <div class="my-16 ml-14 flex-1 flex flex-col items-center 1bg-amber-200">
      <!--   todo: 横屏和竖屏的video样式应该不同   -->
      <video class="bg-black w-[90%] h-[70vh] rounded-lg" controls>
        <source type="video/mp4" src="@/assets/videos/12039562_3840_2160_60fps.mp4"/>
        <!--        <source type="video/mp4" src="@/assets/videos/test.mp4"/>-->
      </video>
      <div class="gap-2 w-[90%] m-4 flex flex-col justify-center 1bg-amber-200">
        <!--   标题   -->
        <span class=" font-black text-2xl text-start ">
          7月出游攻略~~~
        </span>
        <!--   作者信息   -->
        <div class="flex flex-row items-center gap-6">
          <img class="rounded-full bg-white size-10"
               src="@/assets/vue.svg" alt=""/>
          <div class="flex flex-col justify-center">
            <span>是小宁啊</span>
            <span class="text-xs">11w关注</span>
          </div>
          <span class="mt-1 py-1 rounded-xl bg-black px-4 text-white">
            关注
          </span>
          <div class="flex-1 flex flex-row justify-end mr-6 gap-6">
            <span class='cursor-pointer' title='点赞'>点赞 ❤123</span>
            <span class='cursor-pointer' title='点赞'>下载 📥</span>
            <span class='cursor-pointer' title='分享'>分享 🚀</span>
          </div>
        </div>
        <!--   简介   -->
        <div class="relative w-[63vw] bg-gray-200 mt-2 rounded-lg ">
          <p :class="!open && 'line-clamp-3 h-20'" class=" w-full p-2 ">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur earum iusto quisquam? Consectetur
            doloremque mollitia totam. Commodi distinctio, dolores ipsum labore neque odio optio quisquam sequi, soluta
            voluptas voluptatem voluptatibus.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate dicta ex numquam quam rem!
            Accusamus consectetur cupiditate, doloribus impedit maxime reiciendis vero! Distinctio dolorem eligendi
            nobis officiis quae? Eveniet.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores culpa in maiores minus modi quibusdam
            quod quos sapiente. Accusantium aspernatur at earum eligendi explicabo fugiat necessitatibus obcaecati quia
            repellendus tenetur.
          </p>
          <span
              @click="open=!open"
              class="absolute bottom-1 right-2 cursor-pointer">
            {{ open ? '收起' : '更多' }}
          </span>
        </div>
      </div>
      <!--   评论   -->
      <div class=" w-[90%]  flex-col flex gap-4">
        <!-- 添加评论 -->
        <div class="mt-5 flex items-center flex-row gap-4">
          <!-- 头像 -->
          <img class="size-12 rounded-full"
               src="@/assets/logo.png" alt=""/>
          <!-- 输入框 -->
          <input placeholder="输入评论留言..."
                 type="text"
                 class="p-2 flex-1 mx-2"/>
          <img
              class="size-10"
              src="@/assets/send-fill.png" alt=""/>
        </div>
        <hr class="my-2 "/>
        <div class="w-full flex flex-col gap-2"
             v-for="item in [1,2,3,4]" :key="item">
          <div class="flex flex-row gap-2 border-b pb-2">
            <!-- 头像 -->
            <img class="size-12 rounded-full"
                 src="@/assets/logo.png" alt=""/>
            <div class="flex flex-col">
              <span>username</span>
              <span class="text-xs">2024-01-20</span>
            </div>
          </div>
          <span class="py-1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Explicabo hic numquam quibusdam quo rerum temporibus ullam vitae.
            Beatae consequatur delectus dicta, dolores, dolorum et ipsam,
            laboriosam magni mollitia nemo quos.
          </span>
          <div class="flex flex-row gap-4">
            <span>👍100</span>
            <span>👎</span>
            <span>回复</span>
          </div>
          <span class="text-blue-600">↓ 共99条回复</span>
        </div>
      </div>
    </div>
    <!--  推荐区域  -->
    <div class="w-[25%] 1bg-cyan-50">
      <!--  选集(如果有)  -->
      <div></div>
      <!--   推荐   -->
      <div class="flex flex-col gap-4 my-4 w-full">
        <div v-for="item in [1,2,4,5,6,7,8,9,0]" :key="item"
             class="flex flex-row gap-3 items-center ">
          <img class="rounded-lg h-28 w-44"
               src="@/assets/bridge-water-sky-plant-leaf-natural-landscape-1667506-pxhere.com.jpg" alt=""/>
          <div class="flex flex-col gap-1">
            <span class="mb-2 line-clamp-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
            <span class="text-xs text-gray-500">啊雷游戏</span>
            <div class="flex flex-row gap-1">
              <span class="text-xs">7w次观看</span>
              <span class="text-xs">2024-02-02</span>
            </div>
          </div>
        </div>
        <div v-for="item in [1,2,4,5,6,7,8,9,0]" :key="item"
             class="flex flex-row gap-3 items-center ">
          <img class="rounded-lg h-28 w-44"
               src="@/assets/bridge-water-sky-plant-leaf-natural-landscape-1667506-pxhere.com.jpg" alt=""/>
          <div class="flex flex-col gap-1">
            <span class="mb-2 line-clamp-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
            <span class="text-xs text-gray-500">啊雷游戏</span>
            <div class="flex flex-row gap-1">
              <span class="text-xs">7w次观看</span>
              <span class="text-xs">2024-02-02</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>